<template>
  <div class="search-user">
    <div class="head-text"> {{ $t('firm.availableUsers') }}{{ userTotal }}</div>
    <el-form :inline="true" class="bottom-form" @submit.native.prevent>
      <el-form-item>
        <el-tooltip
          popper-class="atooltip"
          :content="$t('firm.newUser')"
          placement="left"
        >
          <el-button
            :disabled="!addAble"
            type="primary"
            @click="$emit('onShowAdd')"
          >
            {{ $t('firm.addUser') }}
          </el-button>
        </el-tooltip>
      </el-form-item>
      <!-- <el-form-item>
        <el-input
          v-model="formSearch.userName"
          placeholder="输入用户名或姓名搜索"
          prefix-icon="el-icon-search"
          @keyup.enter.native="onSearch"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>

export default {
  props: {
    userTotal: {
      type: Number,
      default: 0
    },
    maxUserNums: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      formSearch: {}
    }
  },
  computed: {
    addAble() {
      return this.userTotal < this.maxUserNums
    }
  },
  methods: {
    // 回车查询
    onSearch() {
      this.$store.commit('firmMg/UPDATE_CONDITIONS', this.formSearch)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-user {
  display: flex;
  justify-content: space-between;
  height: 60px;
  background-color: #f7f8fa;
  margin-bottom: 10px;
  align-items: center;
  .head-text {
    margin-left: 30px;
  }
  .bottom-form {
    height: 30px;
  }
}

.atooltip {
  color: red;
}
</style>
